<script setup lang="ts">
import { computed } from 'vue';
import QuboTable from './components/QuboTable.vue'
import video42 from '../../assets/video/video42.mp4'
import video43 from '../../assets/video/video43.mp4'
import video52 from '../../assets/video/video52.mp4'
import video53 from '../../assets/video/video53.mp4'

// 接收参数和事件
const props = defineProps<{
  params: {
    nodeCount: number;
    flowCount: number;
  }
  visualizationType: string;
}>();

const emit = defineEmits(['close']);

// 根据可视化类型计算标题
const modalTitle = computed(() => {
  return props.visualizationType === 'qubo' 
    ? 'QUBO矩阵' 
    : '3D可视化连接图';
});

// 使用public目录下的视频
const videoSrc = computed(() => {
  // 直接基于节点数和流量数返回视频路径
  if (props.params.flowCount === 3 && props.params.nodeCount === 5) {
    return video53;
  } else if (props.params.flowCount === 2 && props.params.nodeCount === 5) {
    return video52;
  } else if (props.params.flowCount === 3 && props.params.nodeCount === 4) {
    return video43;
  } else if (props.params.flowCount === 2 && props.params.nodeCount === 4) {
    return video42;
  }
  return '';
});

// 关闭弹窗
const closeModal = () => {
  emit('close');
};

</script>

<template>
  <div class="fixed inset-0 flex items-center justify-center z-50">
    <!-- 背景遮罩 -->
    <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
    
    <!-- 弹窗内容 -->
    <div class="relative w-[45.56vw] h-[60.12vh] bg-black rounded-[0.83vw] border-[0.28vw] border-[rgba(0,182,206,0.5)] overflow-hidden z-10">
      <!-- 弹窗标题栏 - 调整样式与CalculationModal一致 -->
      <div class="bg-[#2B2B2B] px-[1.94vw] py-[0.49vh] h-[6.91vh] flex justify-between items-center border-b border-[#2A2A2A]">
        <h2 class="text-base text-white font-normal">{{ modalTitle }}</h2>
        <!-- 替换为X图标按钮 -->
        <button 
          @click="closeModal" 
          class="text-gray-400 hover:text-gray-200 transition-colors"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <!-- 结果内容区域 -->
      <div v-if="visualizationType === 'qubo'" class="h-[calc(100%-6.91vh)] text-white">
        <QuboTable :nodeCount="params.nodeCount" :flowCount="params.flowCount" />
      </div>
      
      <!-- 3D可视化视频区域 -->
      <div v-else class="h-[calc(100%-6.91vh)] flex items-center justify-center">
        <video 
          class="w-full h-full object-contain"
          style="transform: scale(0.9)"
          autoplay
          loop
          muted
          playsinline
        >
          <source :src="videoSrc" type="video/mp4" />
          您的浏览器不支持视频播放
        </video>
      </div>
    </div>
  </div>
</template> 

<style scoped>
/* 添加任何需要的样式 */
</style> 